<template >
  <PageWrapper dense contentFullHeight fixedHeight>
    <div class="chart-list">
      <div class="chart-box">
        <Line
          class="chart"
          :loading="loadingLineTotalRef"
          :chartData="lineTotalData"
          title="碳排放月趋势"
        />
      </div>
      <div class="chart-box">
        <Pie
          class="chart"
          :loading="loadingBarYearRef"
          :chartData="barYearData"
          title="当年排放总量各项占比"
        />
      </div>
      <div class="chart-box">
        <Line
          class="chart"
          :loading="loadingLineTypeRef"
          :chartData="lineTypeData"
          title="碳排放各项月趋势"
        />
      </div>
      <div class="chart-box">
        <Pie
          class="chart"
          :loading="loadingBarMonthRef"
          :chartData="barMonthData"
          title="当月排放总量各项占比"
        />
      </div>
    </div>
  </PageWrapper>
</template>
<script setup>
  import Line from '@/components/Charts/Line/index.vue'
  import Pie from '@/components/Charts/Pie/index.vue'
  import { getTotalLineData, getTypeLineData, getBarData } from '@/api/carbon/calc'
  import { ref, onMounted } from 'vue'
  import dayjs from 'dayjs'
  import { PageWrapper } from '@/components/Page'

  const loadingLineTotalRef = ref(false)
  const lineTotalData = ref()

  const loadingLineTypeRef = ref(false)
  const lineTypeData = ref()

  const loadingBarYearRef = ref(false)
  const barYearData = ref()

  const loadingBarMonthRef = ref(false)
  const barMonthData = ref()

  onMounted(() => {
    getLineTotalData()
    getLineTypeData()
    getBarYearData()
    getBarMonthData()
  })
  const getLineTotalData = () => {
    loadingLineTotalRef.value = true
    getTotalLineData({
      queryType: 'year',
      startDay: dayjs().get('year'),
    })
      .then((res) => {
        lineTotalData.value = res
      })
      .finally(() => {
        loadingLineTotalRef.value = false
      })
  }
  const getLineTypeData = () => {
    loadingLineTypeRef.value = true
    getTypeLineData({
      queryType: 'year',
      startDay: dayjs().get('year'),
    })
      .then((res) => {
        lineTypeData.value = {
          ...res,
          yaxisList: res.yaxisList.map((item) => ({
            ...item,
            type: 'line',
          })),
        }
      })
      .finally(() => {
        loadingLineTypeRef.value = false
      })
  }

  const getBarYearData = () => {
    loadingBarYearRef.value = true
    getBarData({
      queryType: 'year',
      startDay: dayjs().get('year'),
    })
      .then((res) => {
        barYearData.value = res
      })
      .finally(() => {
        loadingBarYearRef.value = false
      })
  }
  const getBarMonthData = () => {
    loadingBarYearRef.value = true
    getBarData({
      queryType: 'month',
      startDay: dayjs().format('YYYY-MM'),
    })
      .then((res) => {
        barMonthData.value = res
      })
      .finally(() => {
        loadingBarMonthRef.value = false
      })
  }
</script>
<style scoped lang="scss">
  .chart-list {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    padding: 4px;
    background: #fff;

    .chart-box {
      flex-basis: 50%;
      height: 50%;
      padding: 4px;
      overflow: hidden;

    }
  }
</style>
